<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父组件和子组件</title>
</head>
<body>
<div id="app">

  <!--  3、组件的使用-->
  <!--  组件2中包含组件1-->
  <my-div2></my-div2>

  <!--  该组件1是不可直接使用的，因为没有在root组件中注册过-->
  <my-div1></my-div1>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1、创建组件构造器,创建一个组件对象

  // 【子组件】
  // 创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容
  const myDiv1 = Vue.extend({
    template: `
       <div>
         <h2>我是标题1</h2>
         <p>我是内容1</p>
       </div>`
  })

  // 【父组件】
  // 嵌套子组件，extend方法传入对象，对象里面的components属性，也是可以将另一个组件对象添加进该组件的，components对应对象的属性名称是组件的名称，属性值是已经创建的组件对象
  // 这里的子组件是上面创建的组件对象
  const myDiv2 = Vue.extend({
    template: `
      <div>
        <h2>我是标题2</h2>
        <p>我是内容2</p>
        <my-div1></my-div1>
      </div>`,
    components: {
      myDiv1: myDiv1
    }
  })

  /*------------------------------------------------------------------------------------------------------------------------*/

  // root组件
  const app = new Vue({
    el: "#app",
    data: {},
    //■【局部组件的注册方式，只在本实例中才会生效】
    // 2、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
    //这里注册组件2即可，组件1已经注册进了组件2，所以使用组件2时就是组件2嵌套组件1的样子
    components: {
      myDiv2: myDiv2
    }
  });
</script>
</body>
</html>